<template>
	<view  class="bgColor-white" style="width: 100%;height: 100%;">
		<cu-custom :key="'header'+headerKey" bgColor="bg-gradual-blue-light" :isBack="true" backText="返回" title="银行卡"></cu-custom>
		<view v-if="show">
			<view class="card-content" v-for="(item, index) in bankCardList" :key="index" @tap="editCard(item)">
				<bankItem :bankCode="item.bankCode" :bankName="item.bankName" :cardCode="item.cardCode" :mainFlag="item.mainFlag=='1'?true:false"></bankItem>
			</view>
		</view>
		<view class="flex flex-direction" style="padding: 10rpx 20rpx 10rpx 20rpx">
			<button class="cu-btn shadow margin-tb-sm lg" :class="userType == '20' ? 'bg-gradual-blue-light' : 'bg-gradual-orange-light'" @tap="addCard">
				<text class="basefont icon-plus-circle" style="padding-right: 10rpx;"></text>
				添加银行卡
			</button>
		</view>
	</view>
</template>

<script>
import store from '@/store';
import api from '@/api/society/my/bankCard.js';
import reqConfig from '@/common/config/reqConfig.js';
import bankItem from './bank-item.vue';

export default {
	onShow(){
		this.headerKey += 1;
		this.show=false
		this.indexs()
	},
	components: {
		bankItem
	},
	data() {
		return {
			headerKey:0,
			userType: store.state.hh_userType,
			bankCardList: '',
			show:false
		};
	},
	methods: {
		IsCard(e) {
			this.isCard = e.detail.value;
		},
		addCard: function() {
			this.$Router.push({
				name: 'addCard'
			});
		},
		editCard: function(item) {
			this.$Router.push({
				name: 'editCard',
				params: item
			});
		},
		indexs: function() {
			const data = {};
			this.$http.post(api.cardList, data).then(res =>  {
				this.show = true
				this.bankCardList = res.result
			}).catch(err => {
			});
		}
	}
	
};
</script>

<style>
.card-content cu-tag {
	justify-content: flex-start;
}

.textbody {
	position: absolute;
	top: 0;
	width: 100%;
	background-color: transparent;
	padding: 0rpx 30rpx;
}

.cardid {
	position: absolute;
	top: 0;
	width: 100%;
	background-color: transparent;
	padding: 0rpx 30rpx;
}

.card-content {
	display: flex;
	flex-direction: column;
	padding: 20rpx;
}
</style>
